import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
import Home from "@/views/Home";
import About from "@/views/About";
import Message from "@/views/Message";
import News from "@/views/News";
import Detail from "@/views/Detail";

// 安装插件
// 提供两个内置全局组件：router-link 和 router-view (RouterLink 和 RouterView)
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history", // 路由的模式（两种：hash和history）
  routes: [
    // 路由配置项
    {
      path: "/home", // 路由路径(只能以 / 开头)
      component: Home, // 路由组件
      name: "Home", // 路由名称
      redirect: "/home/news", // 重定向地址
      // 子路由
      children: [
        {
          path: "/home/message",
          component: Message,
          name: "Message",
          children: [
            {
              name: "Detail",
              path: "/home/message/:id",
              component: Detail,
            },
          ],
        },
        {
          path: "news", // 路径简写：自动补全父路由路径 -> /home/news
          component: News,
          name: "News",
          meta: {
            name: "jack",
            age: 18,
          },
        },
      ],
    },
    {
      path: "/about",
      component: About,
      name: "About",
    },
    {
      path: "*", // 匹配任意地址
      redirect: "/home", // 重定向
    },
  ],
});

export default router;
